<template>
  <div>
    <h2>我的预约</h2>
    <!-- 对于没有记录的显示提示 -->
    <p v-if="reservations.length === 0">此处没有预约记录。</p>
    <el-row :gutter="20" v-else>
      <el-col v-for="reservation in reservations" :key="reservation.id" :span="6">
        <!-- 使用 ReservationCard 组件来展示预约信息 -->
        <ReservationCard :reservation="reservation" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { findReservationByUserIdService } from '@/api/location.js'; // 确保路径正确
import ReservationCard from '@/components/MyReservationCard.vue'; // 引入预约信息卡片组件

const reservations = ref([]); // 用于存储预约记录

// 假设您通过某种方式获取当前用户 ID，例如从 Vuex 或本地存储
const userId = 'currentUserId'; // TODO: 实际获取用户 ID 的方式

// 查询当前用户的预约记录
const fetchReservations = async () => {
  try {
    const response = await findReservationByUserIdService(); // 获取当前用户的预约记录
    reservations.value = response.data; // 假设服务返回的数据包含预约记录数组
    console.log('用户的预约记录:', reservations.value); // 输出预约记录到控制台
  } catch (error) {
    console.error('查询预约记录时出错:', error);
  }
};

// 组件挂载时调用查询函数
onMounted(() => {
  fetchReservations();
});
</script>

<style scoped>
/* 在这里添加样式 */
h2 {
  margin-bottom: 20px; /* 添加标题下边距 */
}
</style>
